<html>

<head>



<style type="text/css">
body{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 10px 10px 10px 10px;
	padding: 0 0 0 0;
	color:#000000;
	background:#ffffff;
}

table{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

a:link, a:visited{
	font: 11px Tahoma, Arial, Helvetica, sans-serif;
	color:#0379A1;
	text-decoration: underline;
}

a:active{
	font: 11px Tahoma, Arial, Helvetica, sans-serif;
	color:#0482AD;
	text-decoration: underline;
}

a:hover{
	text-decoration: none;
}

.sample_close{
	width: 14px;
	height: 14px;
	float: right;
	margin-right: 4px;
}

table.sample_header{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 100%;
	height: 24px;
	background: #9BD7EB;
	border 0;
}

.sample_code{
    background-color: #EBEBEB;
    background: url(../);
    padding: 5px;
    margin: 20px 0 20px 0;
    border-left: 20px solid #cecece;
}



xmp, blockquote, pre{
	font-size:11px;
	margin: 5px 0 15px 0;
	padding: 5px 5px 20px 5px;
	font-family: Courier;
	background-color: #EBEBEB;
	border-left: 20px solid #cecece;
}



h1{
	font: bold 28px Times;
	color: #383838;
	width: 100%;
	height: 24px;
	text-decoration:underline;
	xbackground: #9BD7EB;
}

h2{
	font: bold 20px Arial, Tahoma;
	margin: 18px 0px 10px 0;
	color: #525252;
}

h2 a:link, h2 a:visited{
	font: bold 20px Arial, Tahoma;
	color:#0379A1;
	text-decoration: none;
}

h2 a:active{
	font: bold 20px Arial, Tahoma;
	color:#0482AD;
	text-decoration: none;
}

h2 a:hover{
	text-decoration: none;
	border-bottom: 2px dotted;
}

h3{
	font: bold 16px/16px Arial, Helvetica, sans-serif;
}

h4{
	font: bold 16px/16px Arial, Helvetica, sans-serif;
	color: #0482AD;
	padding: 20px 0 0 0;
}

h5{
	font: bold 13px/12px Arial, Helvetica, sans-serif;
	color: #0482AD;
	padding: 14px 0 4px 0;
	margin: 0;
}

h6{
	font: bold 11px/11px Arial, Helvetica, sans-serif;
	padding: 5px 0 5px 20px;
	margin: 5px;
	color: #3C3C3C;
}

.op{
	cursor:pointer;
}

div.block{
	margin-left: 0;
}

li{
	margin-top:2px;
}

span.important{
	font-weight:bold;
	color:maroon;
}

.div_drop{
	display:none;
	margin: 0px 0 10px 10px;
	padding-left: 10px;
	font-size:12px;
	border-left: 2px solid #777777;
}

.professional{
	font: bold 11px/11px Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	background: #ff800f;
	padding: 1px 1px 2px 3px;
}

.experimental{
	font: bold 11px/11px Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	background: #76b130;
	padding: 1px 1px 2px 3px;
}

.depricated{
	font: bold 11px/11px Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	background: #ff0000;
	padding: 1px 1px 2px 3px;
}

.div_method{
	margin:20px 0 20px 0;
	padding-left: 10px;
	font-weight:bold;
	cursor:pointer;
}

.div_strong_method{
	font: bold 12px/18px Tahoma, Arial, Helvetica, sans-serif;
	color: #7c7c7c;
	border-bottom: 1px dotted #cecece;\
}

.exem{
	font: bold 11px/11px Tahoma, Arial, Helvetica, sans-serif;
	color: #1da6d3;
	padding-right: 10px;
}
.tdh{
	background-color:#f4f4f4;
	padding:2px;
}

div.copyright{
	margin-top:20px;
	font-size:12px;
	font-family:arial, tahoma;
	color:gray;
}

</style>

</head>

<body>
















<div id="454240000000004001_x0" zid="1">



</div>


<div id="454240000000004001_x1" zid="2">


<table border="0" cellpadding="0" cellspacing="0" class="sample_header" zid="71">


<tbody zid="3">


<tr valign="center" zid="4">
<!-- COMPONENT ICON -->


<td align="center" width="10" zid="5">&nbsp;</td>
<!-- COMPONENT NAME --><td align="left" zid="6">


<p zid="224">


<a href="http://www.dhtmlx.com/" zid="7">DHTMLX</a> Documentation</p>


</td>


</tr>


</tbody>


</table>


</div>


<h1 id="la7y">Implementing custom content in header|footer</h1>
<div id="ul.z" style="text-align: right;"><b id="ish.">Level</b>: <font id="qhpc" color="#bf9000">Intermediate, <font id="y6b9" color="#990000">Complex</font></font><br id="cgbl"></div><br id="x_e1">
<h2 id="pocl">Plain HTML inside headers|footers<br id="t9id"></h2><br id="e8h.">All header|footer related commands allow you to use HTML instead of the text, so if you want to have some image inside the header you can directly write it as follows:<br id="xtj5">
<blockquote id="ywz-">grid.setHeader("A,&lt;img src='some.gif'/&gt;,C")<br id="e6i7">grid.attachFooter("A,&lt;strong&gt;B&lt;/strong&gt;,C");<br id="rqsw"></blockquote>The same thing works while loading data from XML, but you need to be sure the data is correctly escaped:<br id="b1tp">
<blockquote id="a7rs">...<br id="q680">&lt;column&gt;&amp;lt;img src='some.gif'&amp;gt;&lt;/column&gt;<br id="yj:2"></blockquote>The usage of "&amp;gt;" and "&amp;lt;" makes the code poorly readable, so instead of them CDATA sections can be used:<br id="em_e">
<blockquote id="k4l0">...<br id="o2z6">&lt;column&gt;&lt;![CDATA[&nbsp;&lt;img&nbsp;src='some.gif'&gt; ]]&gt;&lt;/column&gt;<br id="qanz"></blockquote>
<h2 id="b20h">Adding custom logic&nbsp;to&nbsp;headers|footers<br id="ii8y"></h2>Starting from dhtmlxgrid 1.5 it is possible to add active content in header|footer by using shortcuts.<br id="h2.e">The following set of shortcuts is built in:<br id="cguc"><br id="yf9c">
<ul id="f7tc">
<ul id="mk55">
<li id="yu6p"><b id="f7uz">text_filter</b> - input box, which value is used as filtering mask;<br id="kdy-">
</li><li id="mrva"><b id="mcdg">select_filter</b> - select box, which value is used as filtering mask;<br id="sxa5">
</li><li id="ty3c"><b id="btas">combo_filter</b>- dhtmlxcombo, which value is used as filtering mask;<br id="znzk">
</li><li id="y6.."><b id="qn4q">text_search</b> - input box; the nearest row, that contains inputed text, becomes selected;<br id="rb:h">
</li><li id="lkd2">
<div id="ovuc"><b id="t19j">numeric_filter</b> - input box, which value is used as filtering mask; allows you to use comparison operators in it,&nbsp;such&nbsp;as:&nbsp; </div></li></ul></ul>
<blockquote id="hkwc">equal to<b id="owvx"> = N</b><br id="b-bv">greater than <b id="ui56">&gt; N</b><br id="xtzw">lesser than <b id="a4jk">&lt; N</b><br id="drpu">lesser or equal <b id="ydn5">&lt;= N</b><br id="nw3u">greater or equal <b id="zsm:">&gt;= N</b><br id="mmzr">range of values <b id="jx_t">N1 .. N2</b><br id="jmow"></blockquote>
<ul id="aakp">
<li id="g0ta">
<div id="yx39"><b id="w1g5">master_checkbox</b> - checkbox; changing its state will force state changing of all checkboxes in the related column;<br id="fd5o"></div>
</li><li id="atxd">
<div id="r.0p"><b id="i-dp">stat_total</b> - calculate total of all values in a column;<br id="omto"></div>
</li><li id="t.c-">
<div id="jsw."><b id="ubr5">stat_max</b> - calculate max value in a column;<br id="ub90"></div>
</li><li id="k5bg">
<div id="alca"><b id="hekh">stat_min</b> - calculate min value in a column;<br id="y1v."></div>
</li><li id="fnle">
<div id="e.88"><b id="z7g6">stat_average</b> - calculate average value in a column;<br id="uwhd"></div>
</li><li id="a2li">
<div id="jx4h"><b id="aqqf">stat_count</b> - calculate number of rows.<br id="okpw"></div></li></ul><br id="y_k9"><br id="nm9t">The shortcuts can be used within the following commands:<br id="b3zv">
<blockquote id="ok_1">grid.setHeader<br id="gy56">grid.attachHeader<br id="p5ex">grid.attachFooter<br id="rswt"><br id="t94t">grid.setHeader("A,<b id="j0io">#master_checkbox</b>,C");<br id="xor5">grid.attachHeader("<b id="ql3i">#text_filter</b>,#rspan,<b id="m1vc">#text_filter</b>");<br id="c.-n"></blockquote>Or they can be used with related XML tags in case of configuration from XML:<br id="xqoz">
<blockquote id="lb:b">...<br id="uiga">&lt;column ... &gt;#text_search&lt;/column&gt;<br id="j314"></blockquote><span id="gf00" style="background-color: rgb(255, 255, 0);">Shortcuts don't work for data part of grid.<br id="jw.m"><br id="el91"></span>While the main purpose of such shortcuts is filtering and collecting statistics, they can be used to place any complex content in grid headers|footers.<br id="dy55"><br id="cxqy">To create custom shortcut you should just create a new function with the corresponding name: <br id="j6yv"><br id="nlql">
<blockquote id="d._l">grid=new...<br id="wqa0">grid._in_header_<b id="s1fs">custom_label</b>=function(tag,index,data){ //name contains "_in_header_"+shortcut_name<br id="u3pr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag.innerHTML="works";<br id="scuw">}<br id="ueru">grid.setHeader("A,<b id="uqul">#custom_label</b>,C");<br id="m3id">...<br id="n7ti"></blockquote>The function accepts 3 parameters: <br id="tews">
<ul id="ia98">
<li id="ih:u">tag - HTML node&nbsp;of&nbsp;header|footer;<br id="b4os">
</li><li id="oifv">index - column index; 
</li><li id="dbql">data - surrounding data (is described below).</li></ul>The above mentioned snippet will produce grid with the header like this: <br id="p1wo">
<blockquote id="n5fq">A | works | B<br id="oxq3"></blockquote><br id="jcvr">A shortcut can be surrounded by any custom content, in the snippet given above it is just ignored. But we can update the snippet in the following manner: <br id="w5ze">
<blockquote id="tfp3">grid=new...<br id="vthe">grid._in_header_custom_label=function(tag,index,data){ //name contains "_in_header_"+shortcut_name<br id="mfrz">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag.innerHTML=<b id="bzj7">data[0]</b>+"works"+<b id="jjgv">data[1]</b>;<br id="y6:s">}<br id="yyw9">grid.setHeader("A,#custom_label,C");<br id="o68g">...<br id="yh9n"></blockquote>data&nbsp;-&nbsp;array of two&nbsp;elements;<br id="s99j">data[0]&nbsp;- the text displayed before a shortcut&nbsp;in the header;<br id="h3wd">data[1]&nbsp;- the text displayed after a shortcut&nbsp;in the header. <br id="w_di">
<blockquote id="vx6.">grid.setHeader("A,it is {#custom_label}!,C"); // =&gt; A | it works! | B<br id="vf5e">//data was equal to &nbsp;["it","!"]<br id="laib"></blockquote><br id="st8b">
<h3 id="nmxh">a) Clear button in header<br id="fbdg"></h3>
<blockquote id="q5:q">grid=new...<br id="bkad">grid._in_header_clear_button=function(tag){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//name contains "_in_header_"+shortcut_name<br id="jluy">&nbsp;&nbsp;&nbsp;&nbsp;tag.innerHTML=data[0]+"&lt;input type='button' value='clear'&gt;";&nbsp; //HTML view<br id="er9j">&nbsp;&nbsp;&nbsp;&nbsp;var grid = this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//store reference for further usage<br id="y9ph">&nbsp;&nbsp;&nbsp;&nbsp;tag.firstChild.onclick=function(tag,index){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;//on button click<br id="kgz:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.forEachRow(function(id){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //for each row in grid<br id="ye35">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.cells(id,index).setValue("");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //clear cell value for related column<br id="p_dp">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})<br id="bf2j">&nbsp;&nbsp;&nbsp;&nbsp;}<br id="gepr">}<br id="lgsz">grid.setHeader("A,B{#clear_button},C");<br id="ein3">...<br id="ud:h"></blockquote>In the above mentioned snippet we add an input button inside the header (we use data[0] because we need to preserve the existing label), and attach some code to this button, which will set all values in related column as "".<br id="fu9x">The cool thing here is that you can still use any column header while the button will be just added to a normal content header because "data[0]+" is used in the code.<br id="vpi4">If "data[0]+" chunk will be removed - the button will replace <span id="io-t"><b id="mpn0">all</b></span> the header text.<br id="cxl2"><span id="jvzv" style="background-color: rgb(0, 255, 0);">In a real application it is more reasonable to use a small image instead of a button for such task.</span><br id="nas:"><br id="je5-">
<h3 id="ozd-">b) Collapsable columns</h3>Here is another code sample of placing a button inside the header. In this sample a click&nbsp;on the button&nbsp;will&nbsp;collapse the column:<br id="l1vo"><br id="njhd">
<blockquote id="r-vv">
<p id="e-op">grid=new...<br id="chxz">grid._in_header_close_button=function(tag,index,data){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//name contains "_in_header_"+shortcut_name<br id="dmwy">&nbsp;&nbsp;&nbsp;&nbsp;tag.innerHTML=data[0]+"&lt;input type='button' value='close'&gt;"; &nbsp;&nbsp;&nbsp;&nbsp;//HTML view<br id="neio">&nbsp;&nbsp;&nbsp;&nbsp;var grid = this; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//store reference for further usage<br id="oerz">&nbsp;&nbsp;&nbsp;&nbsp;tag.firstChild.onclick=function(tag,index){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//on button click<br id="rxw8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.setColumnHidden(index,true);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //hide related column<br id="xy5q">&nbsp;&nbsp;&nbsp;&nbsp;}<br id="bznk">}<br id="m.43">grid.setHeader("A,B{#close_button},C");<br id="shn1">...<br id="y_rm"></p></blockquote><br id="evm0">As in the previous snippet all the functionality is based on the existing API, no other in-depth coding is required.<br id="gk4v"><br id="t4_m">
<h3 id="qqhi">c) Custom look|tooltips for header cell<br id="wcl:"></h3>
<blockquote id="s05e">grid=new...<br id="d:p8">grid._in_header_special=function(tag){ &nbsp;&nbsp;&nbsp;&nbsp;//name contains "_in_header_"+shortcut_name<br id="ljj.">&nbsp;&nbsp;&nbsp;&nbsp;tag.style.color="red";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set style for existing header<br id="q:if">&nbsp;&nbsp;&nbsp;&nbsp;tag.title="Warning!";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//set tooltip for header<br id="wb7v">}<br id="hvz3">grid.setHeader("A,B{#special},C");<br id="qp2z">...<br id="cevi"></blockquote>All the previous samples set some HTML inside the header, but you can just modify the existing styles instead of setting new content. <br id="c4gi">In most cases the styles can be set by using setHeader command parameters, but in some cases dynamic approach described in this sample can be useful as well.<br id="vlj5"><br id="k6oh">
<h3 id="ir-n">d) Editable header</h3>
<p id="gqce"><br id="ljg3"></p>
<blockquote id="q:7y">grid=new...<br id="todk">grid._in_header_editable=function(tag){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//name contains "_in_header_"+shortcut_name<br id="en_n">&nbsp;&nbsp;&nbsp;&nbsp;var grid=this;<br id="g.30">&nbsp;&nbsp;&nbsp;&nbsp;tag.ondblclick=function(e){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//start edit on dbl-click<br id="nwuc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var val=tag.innerHTML;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//get current header text<br id="gf1w">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag.innerHTML="&lt;input type='text'&gt;&lt;input type='button' value='done'&gt;"<br id="ogo_">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag.firstChild.value=val;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// set text in editor<br id="yd9q">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag.childNodes[1].onclick=function(){&nbsp;&nbsp;&nbsp;&nbsp;//after&nbsp;clicking "done" button <br id="f71v">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tag.innerHTML=tag.firstChild.value; &nbsp;//replace editor with new text<br id="mfq6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br id="yetg">&nbsp;&nbsp;&nbsp;&nbsp;}<br id="mon9">}<br id="uyh-">grid.setHeader("A,B{#editable},C");<br id="f-v1">...<br id="cs0c"></blockquote><br id="hx17">It is possible to add some really complex effects in a neat&nbsp;way by using&nbsp;some&nbsp;code. The&nbsp;snippet stated above&nbsp;shows&nbsp;how&nbsp;headers&nbsp;can&nbsp;be&nbsp;made editable&nbsp;(the visual design&nbsp;is not good - but it's just&nbsp;a&nbsp;sample).<br id="w72g">The code will attach ondblclick handler to the cell in question, which will switch static text to input.<br id="kchi">
<hr id="jq2n">
<br id="n8qk">In all the samples above the modification was applied to some specific instance of the grid, but it is possible to make some code that will apply a modification for the global prototype, so all instances of the grid will support some new shortcut.<br id="mphf">In order to do this you should just use the following syntax :<br id="iwdp"><br id="i484">
<blockquote id="n876"><b id="f4cs">dhtmlXGridObject.prototype</b>._in_header_SOME=function(tag,index){<br id="mara">....<br id="kn2-">}<br id="ewut"></blockquote><br id="d01_">Such code can be stored in a separate js file and used when required (thus, by creating some functionality once, you can easily reuse it).<br id="yp:f">



<div id="454240000000004001_x68" zid="131">


<div class="copyright" zid="223">&copy; DHTMLX, 2008</div>


</div>


<div id="454240000000004001_x69" zid="132">&nbsp;</div>




</body>
</html>
